<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/goods_list.css"/>
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style type="text/css">
        body,
        html,
        .mui-content {
            padding-top: 0;
            margin-top: 0;
        }

        .mui-scroll-wrapper {
            top: 0px;
        }

        .mui-pull-top-pocket {
            top: 0px;
        }

        .mui-bar-nav ~ .mui-content {
            padding-top: 10px;
        }

        .mui-bar {
            top: 0;
        }
        
						.no_order{
							width: 100%;
							text-align: center;
							margin-top: 50px;
						}
						.no_order img{
							width: 50%;
						}
    </style>
</head>

<body>

<div id="pullrefresh" class=" mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--数据列表-->
        <div class="mui-content">
            <div class="goods_list">
                <div class="item" v-for="i in goods_list" @click="go_goods_detail('1')">
                    <img src="../images/product.png" alt="">
                    <div class="title" v-html="i.title"></div>
                    <div class="price">
                        <span>￥{{i.price}}元</span>
                        <i>
                            <img src="../images/ptsp/car_03.png" alt="">
                        </i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--没有订单状态-->
					<div class="no_order" v-show="goods_list.length<1">
						<img src="../images/no_order_bg.png" alt="" />
					</div>
</div>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/host.config.js"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var list = new Vue({
        el: '.mui-content',
        data: {
            goods_list: '',
            has_more_data: true,
        },
        methods: {
            get_data: function (url, cb) {
                mui.ajax(host_config.host + url, {
                    dataType: 'json', //服务器返回json格式数据
                    type: 'get', //HTTP请求类型
                    timeout: 10000, //超时时间设置为10秒；

                    success: function (res) {
                        //服务器返回响应，根据响应结果，分析是否登录成功；
                        console.log(res);
                        if (res.code == 200) {
                            cb(res)
                        }
                    },
                    error: function (xhr, type, errorThrown) {
                        //异常处理；
                        console.log(type);
                    }
                });
            },
            get_more_data: function () {
                var that = this;
                //如果has_more_data为true 则请求下一页数据。
                if (this.has_more_data) {
                    this.get_data('/sim_data/goods_list_page2.json', function (res) {
                        //将新数据拼接到原有数据之后
                        var new_data = that.goods_list.concat(res.data);
                        that.goods_list = new_data;

                        //tap_init()
                        //如果没有新数据了，则将has_more_data赋值为false
                        that.has_more_data = false;
                    })
                }
            },
            go_goods_detail: function (id) {
                console.log(id);
                mui.openWindow("goods_detail.html", "goods_detail.html")
            }

        },
        mounted: function () {
            //初始化第一页数据
            // console.log(host_config.localStorage.ptid);
            // $.post(url + 'api/menus/menus', {bid: 123}, function (response) {
            //
            // });
            console.log('页面加载');
            var that = this;
            // 初始化页面
            mui.init({
            	pullRefresh: {
            		container: '#pullrefresh',
            		down: {
                        callback: pulldownRefresh
                    },
                    up: {
                        contentrefresh: '正在加载...',
                        callback: pullupRefresh
                    }
            	}
            });

        }
    })

    function tap_init() {
        function click() {
            this.click();
        }

        mui(".goods_list").on('tap', '.item', click)

    }

    function pulldownRefresh() {
        setTimeout(function () {
            // list.get_data("/sim_data/goods_list.json", function (res) {
            //     list.goods_list = res.data;
            // })
            console.log('下拉加载');
            // list.has_more_data = true;
            //获取数据成功过后将 列表重新渲染，完成后执行
            // mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //刷新完成
        }, 1000);
    }

    function pullupRefresh() {
        setTimeout(function () {
            // 调用vue实例中的获取更多数据
            list.get_more_data();
            //如果 has_more_data 为false 则表示没有数据了 则调用endPullupToRefresh
            mui('#pullrefresh').pullRefresh().endPullupToRefresh(!list.has_more_data); //参数为true代表没有更多数据了。

        }, 1000);
    }
</script>
</body>

</html>